<script>
// 引入gridstack
import 'gridstack/dist/gridstack.min.css'
import { GridStack } from 'gridstack'

export default {
  name: 'APP',
  data() {
    return {
      grid: null,
    }
  },
  created() {},
  mounted() {
    this.GridStackInit()
    let container = document.querySelector('.right-box')
    container.ondragover = function (e) {
      e.preventDefault()
    }
    container.addEventListener('drop', (e) => {
      this.addGrid()
    })
    let deleteGrid = document.querySelector('.delete-grid')
    console.log(deleteGrid)
    deleteGrid.ondragover = function (e) {
      e.preventDefault()
    }
    deleteGrid.addEventListener('drop', (e) => {
      console.log(e)
    })
  },
  methods: {
    GridStackInit() {
      let Options = {
        dragOut: true,
        margin: 8,
      }
      this.grid = GridStack.init(Options)
      // let gridData = [
      //   {w: 4, h: 2, content: '1'},
      //   {w: 4, h: 4, content: '不能缩放，也不能移动！', noResize: true, noMove: true},
      //   {w: 2, h: 2, content: '不能缩放！', noResize: true},
      //   {w: 2, h: 2, content: '4'},
      //   {w: 2, h: 2, content: '5'},
      //   {w: 2, h: 4, content: '6'},
      //   {w: 4, h: 2, content: '7'},
      //   {w: 2, h: 2, content: '8'},
      //   {w: 4, h: 2, content: '9'},
      //   {w: 2, h: 2, content: '10'},
      //   {w: 2, h: 2, content: '11'},
      // ]
      // grid.load(gridData)
    },
    addGrid() {
      this.grid.addWidget({ w: 2, h: 2, content: '添加' })
    },
  },
}
</script>
<template>
  <div id="home">
    <!-- 左边的添加与删除 -->
    <div class="left-box">
      <div class="delete-grid">放在这里删除小部件！</div>
      <div class="add-grid" draggable="true">把我拖进仪表盘！</div>
    </div>

    <!-- 右边的grid容器 -->
    <div class="right-box">
      <div class="grid-stack">
        <div class="grid-stack-item" gs-w="4" gs-h="2">
          <div class="grid-stack-item-content" draggable="true">1</div>
        </div>
        <div
          class="grid-stack-item"
          gs-w="4"
          gs-h="4"
          gs-no-resize="true"
          gs-no-move="true"
          gs-locked="true"
        >
          <div class="grid-stack-item-content">2(不能缩放，不能移动)</div>
        </div>
        <div class="grid-stack-item" gs-w="2" gs-h="2" gs-no-resize="true">
          <div class="grid-stack-item-content">拉我一把(不能缩放)</div>
        </div>
        <div class="grid-stack-item" gs-w="2" gs-h="2">
          <div class="grid-stack-item-content">4</div>
        </div>
        <div class="grid-stack-item" gs-w="2" gs-h="2">
          <div class="grid-stack-item-content">5</div>
        </div>
        <div class="grid-stack-item" gs-w="2" gs-h="4">
          <div class="grid-stack-item-content">6</div>
        </div>
        <div class="grid-stack-item" gs-w="4" gs-h="2">
          <div class="grid-stack-item-content">7</div>
        </div>
        <div class="grid-stack-item" gs-w="2" gs-h="2">
          <div class="grid-stack-item-content">8</div>
        </div>
        <div class="grid-stack-item" gs-w="4" gs-h="2">
          <div class="grid-stack-item-content">9</div>
        </div>
        <div class="grid-stack-item" gs-w="2" gs-h="2">
          <div class="grid-stack-item-content">10</div>
        </div>
        <div class="grid-stack-item" gs-w="2" gs-h="2">
          <div class="grid-stack-item-content">11</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
#home {
  display: flex;
  width: 100vw;
  background-color: #44a1ee;
}
.left-box {
  display: inline;
  display: flex;
  flex-direction: column;
  width: 20%;
  border-right: 2px dashed #ffffff;
  .delete-grid {
    width: 80%;
    height: 120px;
    background-color: #ee6d44;
    border: 2px solid #ffffff;
    margin: 20px 0 20px 20px;
  }
  .add-grid {
    width: 80%;
    height: 120px;
    background-color: #54ff9f;
    border: 2px solid #ffffff;
    margin: 0 0 0 20px;
  }
}
.right-box {
  width: 70%;
  border: 2px solid #ffffff;
  margin: 20px 0 20px 20px;
}
</style>
<style lang="scss">
.grid-stack-item-content {
  background-color: #ffffff !important;
  text-align: center;
}
</style>
